// @flow
import React from 'react'
import styles from './CmPage.css'
import { Tree } from 'antd'
import R from 'ramda'
const TreeNode = Tree.TreeNode

type Props = {
  data: Object
}
type State = {
  data: Object
}
export default class CmList extends React.Component {
  props: Props
  state: State
  constructor (props: Props) {
    super(props)
    this.state = {
      data: {}
    }
  }

  // componentWillReceiveProps (nextProps: Object) {
  //   if (!R.equals(nextProps.data, this.props.data)) {
  //     this.setState({ data: nextProps.data })
  //   }
  // }
  render () {
    const { data } = this.props
    console.log('props: ', R.isEmpty(data))
    return (
      <div className={styles['tab-list']}>
        <Tree
          showLine
        >
          {
            !R.isEmpty(data)
              ? R.keys(data).map((item, index) => {
                return <TreeNode title={item} key={`0-0-${index}`}>
                  {
                    !R.isEmpty(data[item]) && R.keys(data[item]).map((li, i) => {
                      return <TreeNode title={li} key={`0-0-0-${i}`}>
                        {
                          data[item][li].map((child, x) => {
                            return <TreeNode title={child} key={`0-0-0-${x}`} />
                          })
                        }
                      </TreeNode>
                    })
                  }
                </TreeNode>
              })
            : null
            }
        </Tree>
      </div>
    )
  }
}

// <div className={styles['item']}>
//   <Row>
//     <Col span={6}>
//       <span>k2data-30.k2data.com.cn</span>
//     </Col>
//     <Col span={4}>
//       <span>HIVE</span>
//     </Col>
//     <Col span={6}>
//       <span>ZOOKEEPER</span>
//     </Col>
//     <Col span={4}>
//       <span>YARN</span>
//     </Col>
//     <Col span={4}>
//       <span style={{ border: 'none' }}>HDFS</span>
//     </Col>
//   </Row>
// </div>
// <div className={styles['item']}>2</div>
